<template>
    <view>
        <view class="search-box block" v-if="longInsuranceActive === 0">
            <icon class="search-icon" type="search" size="14" color="#b2b2b2" />
            <input class="search-input" confirm-type="search" placeholder="搜索" @input="completeSearchInput"
                v-model="completeSearchText" />
        </view>
        <view class="search-box block" v-if="longInsuranceActive === 1">
            <icon class="search-icon" type="search" size="14" color="#b2b2b2" />
            <input class="search-input" confirm-type="search" placeholder="搜索" @input="fileSearchInput"
                v-model="fileSearchText" />
        </view>
        <view class="search-box block" v-if="longInsuranceActive === 2">
            <icon class="search-icon" type="search" size="14" color="#b2b2b2" />
            <input class="search-input" confirm-type="search" placeholder="搜索" @input="searchInputbalance"
                v-model="balanceSearchText" />
        </view>
        <view class="tab-radius">
            <tab-radius :list="['已投保客户', '未投保客户', '日投余额不足']" :active="longInsuranceActive" @change="onLongTab" />
        </view>
        <view class="record" v-if="longInsuranceActive === 0">
            <view> 共有{{ completeTotalCount }}条记录 </view>
            <view class="record-box">
                <picker mode="selector" :range="sortList" @change="onSelectComplete">
                    <view class="row">
                        <view>排序</view>
                        <image class="sort-img" src="../../static/home/sort.png" />
                    </view>
                </picker>
            </view>
        </view>
        <view class="record" v-if="longInsuranceActive === 1">
            <view> 共有{{ fileTotalCount }}条记录 </view>
            <view class="record-box">

                <picker mode="selector" :range="sortList" @change="onSelectFile">
                    <view class="row">
                        <view>排序</view>
                        <image class="sort-img" src="../../static/home/sort.png" />
                    </view>
                </picker>
            </view>
        </view>
        <view class="record" v-if="longInsuranceActive === 2">
            <view> 共有{{ balanceTotalCount }}条记录 </view>
        </view>
        <view class="record-list" v-if="longInsuranceActive === 0">
            <no-data v-if="completeList.length === 0" />
            <reminderHtml type="pay" isash="1" :item="item" :longInsuranceActive="longInsuranceActive"
                v-for="(item, index) in completeList" :key="index" @detail="onGoDetail" />
        </view>
        <view class="record-list" v-if="longInsuranceActive === 1">
            <no-data v-if="fileList.length === 0" />
            <reminderHtml type="pay" isash="1" :item="item" v-for="(item, index) in fileList" :key="index"
                @detail="onGoDetail" />
        </view>
        <view class="record-list" v-if="longInsuranceActive === 2">
            <noData v-if="balanceList.length === 0" />
            <view class="balance-box" v-for="(item, index) in balanceList" :key="index"
                @click="onGoDetailClone(item.companyId, item.dealId)">
                <view class="title">
                    {{ item.companyName }}
                </view>
                <view class="data-box row">
                    <view class="data-i">
                        <view class="num">
                            ¥{{ item.wesureBalance }}
                        </view>
                        <view class="name">
                            当前余额
                        </view>
                    </view>
                    <view class="data-i">
                        <view class="num">
                            ¥{{ item.tomorrowTotalCost }}
                        </view>
                        <view class="name">
                            明日扣费
                        </view>
                    </view>
                    <view class="data-i">
                        <view class="num num-active">
                            ¥{{ item.costOverBalance }}
                        </view>
                        <view class="name">
                            扣费后余额
                        </view>
                    </view>

                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { onReachBottom, onLoad, onShow } from '@dcloudio/uni-app'
import { ref, onMounted, onBeforeUpdate, onBeforeUnmount } from 'vue'
import user from '@/utils/user'
import tabRadius from '@/components/tab-radius/tab-radius.vue'
import reminderHtml from '@/components/reminder-html/index.vue'
import { longInsureComplete, longInsureFail, longInsureBalance, GetInsureCompleteDto } from '@/api/reminder'
import noData from '@/components/no-data/no-data.vue'
const props = defineProps(['tabIndex'])
const sortList = ref([
    '账户余额降序',
    '账户余额升序',
    '开通时间倒序',
    '开通时间正序'
])
const longInsuranceActive = ref(0)
const completeSearchText = ref('')
const completePageNum = ref(1)
const completeList = ref([] as GetInsureCompleteDto[])
const completeHasNextPage = ref(true)
const completeTotalCount = ref(0)
const completeSelectIndex = ref(0)

const fileSearchText = ref('')
const filePageNum = ref(1)
const fileList = ref([] as GetInsureCompleteDto[])
const fileHasNextPage = ref(true)
const fileTotalCount = ref(0)
const fileSelectIndex = ref(0)

const balancePageNum = ref(1)
const balanceSearchText = ref('')
const balanceList = ref([] as any)
const balanceHasNextPage = ref(true)
const balanceTotalCount = ref(0)
const balanceSelectIndex = ref(0)
const onGoDetail = (event: { id: number, dealId: number }) => {
    uni.navigateTo({
        url: '/packageRemind/pages/longInsurance-detail/index?id=' + event.id + '&dealId=' + event.dealId
    })
}
const onGoDetailClone = (id: number, dealId: number) => {
    uni.navigateTo({
        url: '/packageRemind/pages/longInsurance-detail/index?id=' + id + '&dealId=' + dealId
    })
}
const loadingflag = ref(false)
onMounted(() => {
    loadingflag.value = true
})
onBeforeUnmount(() => {
    loadingflag.value = false
})
onReachBottom(() => {
    if (loadingflag.value) {
        if (longInsuranceActive.value === 0 && props.tabIndex === 3) {
            if (!completeHasNextPage.value) {
                return
            }
            completePageNum.value += 1
            getLongInsureComplete()
        } else if (longInsuranceActive.value === 1 && props.tabIndex === 3) {
            if (!fileHasNextPage.value) {
                return
            }
            filePageNum.value += 1
            getLongInsureFail()
        } else if (longInsuranceActive.value === 2 && props.tabIndex === 3) {
            console.log('第三个调用')
            if (!balanceHasNextPage.value) {
                return
            }
            balancePageNum.value += 1
            getLongInsureBalance()
        }
    }
})
const onLongTab = (index: number) => {
    longInsuranceActive.value = index
}
const completeSearchInput = (event?: { detail: { value: string } }) => {
    completeHasNextPage.value = true
    completeList.value = []
    completePageNum.value = 1
    completeSearchText.value = event?.detail?.value ?? ''
    getLongInsureComplete()
}
const fileSearchInput = (event?: { detail: { value: string } }) => {
    fileHasNextPage.value = true
    fileList.value = []
    filePageNum.value = 1
    fileSearchText.value = event?.detail?.value ?? ''
    getLongInsureFail()
}
const searchInputbalance = (event?: { detail: { value: string } }) => {
    balanceHasNextPage.value = true
    balanceList.value = []
    balancePageNum.value = 1
    balanceSearchText.value = event?.detail?.value ?? ''
    getLongInsureBalance()
}
const onSelectComplete = async (event: { detail: { value: string } }) => {
    console.log(event, 'event')
    completeSelectIndex.value = Number(event.detail.value)
    console.log(completeSelectIndex.value, 'completeSelectIndex')
    await completeSearchInput()
}
const onSelectFile = async (event: { detail: { value: string } }) => {
    console.log(event, 'event')
    fileSelectIndex.value = Number(event.detail.value)
    await fileSearchInput()
}
const onSelectBalance = async (event: { detail: { value: string } }) => {
    balanceSelectIndex.value = Number(event.detail.value)
    await searchInputbalance()
}
const getLongInsureComplete = async () => {
    const result = await longInsureComplete({
        pageNum: completePageNum.value,
        pageSize: 50,
        searchText: completeSearchText.value,
        sortOrder: completeSelectIndex.value
    })
    if (!result.hasNextPage) {
        completeHasNextPage.value = false
    }
    const arr = []
    arr.push(...completeList.value)
    arr.push(...result.list)
    completeList.value = arr
    completeTotalCount.value = result.totalCount
    console.log(result, '长期保')
}
// 未投保列表
const getLongInsureFail = async () => {
    const result = await longInsureFail({
        pageNum: filePageNum.value,
        pageSize: 50,
        searchText: fileSearchText.value,
        sortOrder: fileSelectIndex.value === 0 ? '' : (fileSelectIndex.value - 1)
    })
    if (!result.hasNextPage) {
        fileHasNextPage.value = false
    }
    const arr = []
    arr.push(...fileList.value)
    arr.push(...result.list)
    fileList.value = arr
    fileTotalCount.value = result.totalCount

    console.log(result, '未投保列表')
}
// 日通报余额不足
const getLongInsureBalance = async () => {
    const result = await longInsureBalance({
        pageNum: balancePageNum.value,
        pageSize: 50,
        searchText: balanceSearchText.value,
        sortOrder: balanceSelectIndex.value === 0 ? '' : (balanceSelectIndex.value - 1)
    })
    if (!result.hasNextPage) {
        balanceHasNextPage.value = false
    }
    const arr = []
    arr.push(...balanceList.value)
    arr.push(...result.list)
    balanceList.value = arr
    balanceTotalCount.value = result.totalCount
}
onMounted(async () => {
    getLongInsureComplete()
    getLongInsureFail()
    getLongInsureBalance()
})
</script>
<style lang="scss" scoped>
.record-list {
    padding: 0 30rpx;
    margin-top: 34rpx;
}

.record {
    padding: 0 30rpx;
    @include flex-between;
    color: $grey;
    font-size: $font-normal;
    margin-top: 30rpx;

    .record-box {
        @include flex-between;
        color: #565868;
        font-size: $font-normal;
        margin-left: 34rpx;
    }
}

.tab-radius {
    padding: 0rpx 30rpx;
}

.sort-img {
    width: 28rpx;
    height: 28rpx;
    margin-left: 8rpx;
}

.balance-box {
    padding: 30rpx;
    border-radius: 16rpx;
    background: #ffffff;
    margin-bottom: 30rpx;

    .title {
        margin-bottom: 30rpx;
        color: $black;
        font-size: $font-medium;
        font-weight: 800;
    }

    .data-box {
        background-color: #FAFAFC;
        border-radius: 8rpx;
        padding: 30rpx;
    }

    .data-i {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .num {
        color: $black;
        font-size: $font-normal;
        font-weight: 800;
    }

    .num-active {
        color: #FF7642;
        font-size: $font-normal;
        font-weight: 800;
    }

    .name {
        color: $grey;
        font-size: $font-normal;
        margin-top: 17rpx;
    }
}
</style>
